<template>
  <div class="app-container">
    <el-form :inline="true" :model="queryParams" class="demo-form-inline">
      <el-form-item label="标题">
        <el-input v-model="queryParams.name" placeholder="标题"></el-input>
      </el-form-item>
      <el-form-item label="审批状态">
        <el-select v-model="queryParams.examineStatus" placeholder="节目状态" clearable>
              <el-option label="审核中" value="0" />
              <el-option label="审核不通过" value="1" />
              <el-option label="审核通过" value="2" />
            </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table ref="menuTableRef" v-loading="loading" :data="infoList" height="550" width="100%">
      <el-table-column prop="name" label="审核标题"></el-table-column>
      <el-table-column prop="iotProgram.programName" label="审核节目"></el-table-column>
      <el-table-column prop="programStatus" label="审核状态">
        <template #default="scope">
          <el-tag class="ml-2" type="warning" v-if="scope.row.examineStatus == '0'">审核中</el-tag>
          <el-tag class="ml-2" type="danger" v-if="scope.row.examineStatus == '1'">审核不通过</el-tag>
          <el-tag class="ml-2" type="success" v-if="scope.row.examineStatus == '2'">审核通过</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" prop="createTime"> </el-table-column>
      <el-table-column fixed="right" label="操作">
        <template #default="scope">
          <el-tooltip content="预览" placement="top">
            <el-button v-hasPermi="['iot:program:query']" size="mini" type="text" icon="el-icon-view"
              @click="openView(scope.row.iotProgram)">审阅</el-button>
          </el-tooltip>
          <el-tooltip content="审核" placement="top">
            <el-button v-hasPermi="['iot:program:query']" size="mini" type="text" icon="el-icon-s-check"
              @click="openApp(scope.row)">审核</el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="审核" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="审核" :label-width="formLabelWidth">
          <el-radio-group v-model="form.examineStatus">
            <el-radio :label="1">审核不通过</el-radio>
            <el-radio :label="2">审核通过</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="审核内容" :label-width="formLabelWidth">
          <el-input v-model="form.examineOpinion" type="textarea" :rows="2" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="viewApp">确 定</el-button>
      </div>
    </el-dialog>

    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />


      <Preview :componentData="componentData" :canvasStyleData="canvasStyleData" @close="handlePreviewChange"
      v-if="centerDialogVisible"></Preview>  
  </div>
</template>

<script>
import { Examinelist, addExamine, editExamine, delExamine } from '@/api/approve/index';
import { programUpdate, programDeital } from '@/api/information/index';
import Preview from '../../components/visual-drag/components/Editor/Preview.vue'
import { re } from 'mathjs';
export default {
  name: '',
  props: {},
  data() {
    return {
      centerDialogVisible: false,
      formLabelWidth: "100px",
      dialogFormVisible: false,
      loading: false,
      infoList: [],
      total: 0,
      formInline: {
        examine_status: "",
        name: ""
      },
      form: {
        id: "",
        examineStatus: 1,
        examineOpinion: ""
      },
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        examineStatus: "",
        name: ""
      },
      data: {}
    }
  },
  components: { Preview },
  computed: {

  },
  watch: {

  },
  created() {

  },
  mounted() {
    this.getList()
  },
  methods: {
    openView (row) {
      this.$store.commit('setComponentData', JSON.parse(row.programData))
      this.$store.commit('setCanvasStyle', JSON.parse(row.programStyles))
      this.centerDialogVisible = true;
    },
    handlePreviewChange() {
      localStorage.removeItem('canvasData')
      localStorage.removeItem('canvasStyle')
      this.$store.commit('setCurComponent', { component: null, index: null })
      this.$store.commit('setComponentData', [])
      this.$store.commit('recordSnapshot')
      this.centerDialogVisible = false
    },
    openApp(row) {
      this.form = row
      this.dialogFormVisible = true
    },
    viewApp() {
      editExamine(this.form).then((res) => {
        let iotProgram = Object.assign({}, this.form.iotProgram)
        iotProgram.programStatus = String(this.form.examineStatus)
        programUpdate(iotProgram).then((res) => {
          this.dialogFormVisible = false
          this.form = {
            id: "",
            examineStatus: 1,
            examineOpinion: ""
          }
        });
      });
    },
    getList() {
      Examinelist(this.queryParams).then((res) => {
        this.infoList = res.rows
        this.total = res.total
      });
    },
    onSubmit() {
      this.getList()
    }
  },
}
</script>



<style scoped></style>
